<style type="text/css" scoped="scoped">
.optionError{
    margin-bottom: 0;
    border-radius:0;
}
</style>
<script type="text/javascript">
    LC.initToolbar({
        'new': LC.S.tools.toolNew,
        'cancel': LC.S.tools.toolCancel,
        'flesh': LC.S.tools.toolFlesh
    });
    $(document).ready(function (e) {
        LC.S.edit('.configDetail .edit', LC.S.serviceUrl + LC.S.URL_UPDATE, '${config._id}');
        var container = $('#configOption')[0];
        var options = {
            name: '配置详情',
            mode: 'view',
            modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
            error: function (err) {
                $('.optionError').text(err.toString());
                console.log(arguments);
            },
            change: function () {
                $('.saveOption').removeClass('hide');
            }
        };
        var json = ${options!"{}"};
        LC.S.optionEdit = editor = new JSONEditor(container, options, json);
    });
    LC.S.id = '${config._id}';
    LC.S.optionUpdate = function () {
        var data = {};
        data.id = LC.S.id;
        var value = {};
        try {
            value = LC.S.optionEdit.get();
            $('.optionError').html('');
            $('.optionError').addClass('hide');
        } catch (e) {
            $('.optionError').removeClass('hide');
            $('.optionError').text(e.toString());
            return;
        }
        value = JSON.stringify(value);
        $.getJSON(LC.S.serviceUrl + LC.S.URL_UPDATE, [
                    {name: LC.const.UPDATE_ID, value: LC.S.id},
                    {name: LC.const.UPDATE_NAME, value: 'OPTION'},
                    {name: LC.const.UPDATE_VALUE, value: value}
                ],
                function (rs) {
                    $('.optionError').text(msg[rs.code]);
                    $('.optionError').removeClass('hide');
                    if (rs.code == code.FINISH || rs.code == code.SUCCESS) {
                        $('.optionError').removeClass('alert-danger');
                        $('.optionError').addClass('alert-success');
                    } else {
                        $('.optionError').removeClass('alert-success');
                        $('.optionError').addClass('alert-danger');
                    }
                });

    }
</script>
<@com.toolbar />
<div class="col-sm-4">
    <div class="panel panel-default">
        <div class="panel-heading">详细信息</div>
        <div class="panel-body configDetail form-horizontal">
            <div class="form-group">
                <label class="col-sm-3 control-label">编　号：</label>
                <div class="col-sm-9">
                    <p class="form-control-static">${config._id}</p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">名　称：</label>
                <div class="col-sm-9">
                    <p><span class="edit form-control-static" etype="text" regx="${check.name}"
                             name="NAME">${config.name}</span>
                    </p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">标　识：</label>
                <div class="col-sm-9">
                    <p><span class="edit" etype="text" regx="${check.key}" name="KEY">${config.key}</span></p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">描　述：</label>
                <div class="col-sm-9">
                    <span class="edit" etype="textarea" name="DESCRIPT" nullable>${config.descript}</span></div>
            </div>
        </div>
    </div>
</div>
<div class="col-sm-8">
    <div class="panel panel-default">
        <div class="panel-heading"><span class="optionTitle">配置详情</span>
            <button type="button" class="btn btn-default hide saveOption" onclick="LC.S.optionUpdate()">保存</button>
        </div>
        <pre class="optionError alert alert-danger hide"></pre>
        <div id="configOption" class="configOption">
        </div>
    </div>
</div>
<div class="clearfix"></div>